<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#small-box{
				width: 400px;
				height: 400px;
				background-image: url(img/13.jpg);
				background-size: 400px 400px;
				position: absolute;
				left:100px;
				top:200px;
				cursor: move;
			}
			#mask{
				width: 100px;
				height: 100px;
				background-color: hotpink;
				opacity: 0.3;
				position: absolute;
				display: none;
			}
			#big-box{
				width: 400px;
				height: 400px;
				background-image: url(img/13.jpg);
				background-size: 1600px 1600px;
				position: absolute;
				left:600px;
				top:200px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="small-box">
			<div id="mask">
				
			</div>
		</div>
		<div id="big-box">
			
		</div>
	</body>
</html>
<script src="1放大镜插件.js" type="text/javascript" charset="utf-8"></script>
<script>
	let oSmallBox = document.querySelector("#small-box");
	let oMask = document.querySelector("#mask");
	let oBigBox = document.querySelector("#big-box");
	
	let mf = new Magnifier(oSmallBox,oMask,oBigBox);
</script>